<!DOCTYPE html>
<html>
    
<head>
    <meta charset="utf-8">
    
    <title>Android目前最稳定和高效的UI适配方案 | ApocalypseBlog</title>
    <canvas id="header_canvas"style="position:absolute;bottom:0"></canvas> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    

    

    

    

    
<link rel="stylesheet" href="/dist/build.css?v=1.14.0.css">

    <script src="/javascripts/bubble.js"></script>
    <script>
        window.isPost = true
        window.aomori = {
            
            
        }
        window.aomori_logo_typed_animated = false
        window.aomori_search_algolia = false

    </script>
<script>
    ((window.gitter = {}).chat = {}).options = {
      room: 'ApocalypseBlog/Apocalypse'
    };
  </script>
  <script src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer></script>
<meta name="generator" content="Hexo 5.3.0"></head>
<!--DaoVoice服务http://blog.daovoice.io/-->

    <script>(function (i, s, o, g, r, a, m) {
        i['DaoVoiceObject'] = r;
        i[r] = i[r] ||
          function () {
            (i[r].q = i[r].q || []).push(arguments);
          };
        i[r].l = 1 * new Date();
        a = s.createElement(o);
        m = s.getElementsByTagName(o)[0];
        a.async = 1;
        a.src = g;
        a.charset = 'utf-8';
        m.parentNode.insertBefore(a, m);
      })(window, document, 'script', ('https:' === document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/b00f5052.js", 'daovoice');
      daovoice('init', {
        app_id: "b00f5052",
      });
      daovoice('update');
    </script>
  
<body>

    <div class="container">
    <header class="header">
        <div class="header-type">
            
            <div class="header-type-inner">
                
                    <a class="header-type-title" href="/">ApocalypseBlog</a>
                
    
                
            </div>
        </div>
        <div class="header-menu">
            <div class="header-menu-inner">
                
            </div>
            <div class="header-menu-social">
                
            </div>
        </div>

        <div class="header-menu-mobile">
            <div class="header-menu-mobile-inner" id="mobile-menu-open">
                <i class="icon icon-menu"></i>
            </div>
        </div>
    </header>

    <div class="header-menu-mobile-menu">
        <div class="header-menu-mobile-menu-bg"></div>
        <div class="header-menu-mobile-menu-wrap">
            <div class="header-menu-mobile-menu-inner">
                <div class="header-menu-mobile-menu-close" id="mobile-menu-close">
                    <i class="icon icon-cross"></i>
                </div>
                <div class="header-menu-mobile-menu-list">
                    
                </div>
            </div>
        </div>
    </div>

</div>

    <div class="container">
        <div class="main">
            <section class="inner">
                <section class="inner-main">
                    <div class="post">
    <article id="post-ckk6o6avu000w7knyd66s6co6" class="article article-type-post" itemscope
    itemprop="blogPost">

    <div class="article-inner">

        
          
        
        
        

        
        <header class="article-header">
            
  
    <h1 class="article-title" itemprop="name">
      Android目前最稳定和高效的UI适配方案
    </h1>
  

        </header>
        

        <div class="article-more-info article-more-info-post hairline">

            <div class="article-date">
  <time datetime="2020-06-11T21:53:01.000Z" itemprop="datePublished">2020-06-12</time>
</div>

            

            

            

        </div>

        <div class="article-entry post-inner-html hairline" itemprop="articleBody">
            <p>Android系统发布十多年以来，关于Android的UI的适配一直是开发环节中最重要的问题，但是我看到还是有很多小伙伴对Android适配方案不了解。刚好，近期准备对糗事百科Android客户端设计一套UI尺寸适配方案，可以和小伙伴们详细的聊一聊这个问题。</p>
<a id="more"></a>

<p>Android适配最核心的问题有两个，其一，就是适配的效率，即把设计图转化为App界面的过程是否高效，其二如何保证实现UI界面在不同尺寸和分辨率的手机中UI的一致性。这两个问题都很重要，一个是保证我们开发的高效，一个是保证我们适配的成效；今天我们就这两个核心的问题来聊一聊Android的适配方案。</p>
<p><img src="http://user-gold-cdn.xitu.io/2018/6/13/163f4be45ba74a31?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" alt="img"></p>
<p>首先，大家都知道，在标识尺寸的时候，Android并不推荐我们使用px这个真实像素单位，因为不同的手机之间，分辨率是不同的，比如一个96*96像素的控件在分辨率越来越高的手机上会在整体UI中看起来越来越小。</p>
<p><img src="http://user-gold-cdn.xitu.io/2018/6/13/163f4bf39182027e?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" alt="img"></p>
<p>出现类似于上图这样这样，整体的布局效果可能会变形，所以px这个单位在布局文件中是不推荐的。</p>
<h2 id="dp直接适配"><a href="#dp直接适配" class="headerlink" title="dp直接适配"></a>dp直接适配</h2><p>针对这种情况，Android推荐使用dp作为尺寸单位来适配UI.</p>
<p>那么什么是dp？dp指的是设备独立像素，以dp为尺寸单位的控件，在不同分辨率和尺寸的手机上代表了不同的真实像素，比如在分辨率较低的手机中，可能1dp=1px,而在分辨率较高的手机中，可能1dp=2px，这样的话，一个96*96dp的控件，在不同的手机中就能表现出差不多的大小了。那么这个dp是如何计算的呢？ 我们都知道一个公式： px = dp(dpi/160) 系统都是通过这个来判断px和dp的数学关系，</p>
<p>那么这里又出现了一个问题，dpi是什么呢？</p>
<p>dpi是像素密度，指的是在<strong>系统软件上指定</strong>的单位尺寸的像素数量，它往往是写在系统出厂配置文件的一个固定值。</p>
<p>我为什么要强调它是软件系统上的概念？因为大家买手机的时候，往往会听到另一个叫ppi的参数，这个在手机屏幕中指的也是像素密度，但是这个是物理上的概念，它是客观存在的不会改变。dpi是软件参考了物理像素密度后，人为指定的一个值，这样保证了某一个区间内的物理像素密度在软件上都使用同一个值。这样会有利于我们的UI适配。</p>
<p>比如，几部相同分辨率不同尺寸的手机的ppi可能分别是是430,440,450,那么在Android系统中，可能dpi会全部指定为480.这样的话，dpi/160就会是一个相对固定的数值，这样就能保证相同分辨率下不同尺寸的手机表现一致。</p>
<p>而在不同分辨率下，dpi将会不同，比如：</p>
<table>
<thead>
<tr>
<th>…</th>
<th align="center">1080*720</th>
<th align="right">1920*1080</th>
</tr>
</thead>
<tbody><tr>
<td>dpi</td>
<td align="center">320</td>
<td align="right">480</td>
</tr>
<tr>
<td>dpi/160</td>
<td align="center">2</td>
<td align="right">3</td>
</tr>
</tbody></table>
<p>根据上面的表格，我们可以发现，720P,和1080P的手机，dpi是不同的，这也就意味着，不同的分辨率中，1dp对应不同数量的px(720P中，1dp=2px，1080P中1dp=3px)，这就实现了，当我们使用dp来定义一个控件大小的时候，他在不同的手机里表现出相应大小的像素值。</p>
<p><img src="http://user-gold-cdn.xitu.io/2018/6/13/163f4d6fe59be47d?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" alt="img"></p>
<p>我们可以说，通过dp加上自适应布局和weight比例布局可以基本解决不同手机上适配的问题，这基本是最原始的Android适配方案。</p>
<p>这种方式存在两个小问题，第一，这只能保证我们写出来的界面适配绝大部分手机，部分手机仍然需要单独适配，为什么dp只解决了90%的适配问题，因为并不是所有的1080P的手机dpi都是480，比如Google 的Pixel2（1920<em>1080）的dpi是420，也就是说，在Pixel2中，1dp=2.625px,这样会导致相同分辨率的手机中，这样，一个100dp</em>100dp的控件，在一般的1080P手机上，可能都是300px,而Pixel 2 中 ，就只有262.5px,这样控件的实际大小会有所不同。</p>
<p>为了更形象的展示，假设我们在布局文件中把一个ImageView的宽度设置为360dp,那么在下面两张图中表现是不一样的：</p>
<p>图一是1080P,480dpi的手机，图二是1080P,420dpi的手机</p>
<p><img src="http://user-gold-cdn.xitu.io/2018/6/10/163ea44745e200a6?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" alt="1080P,480dpi的手机"></p>
<p><img src="http://user-gold-cdn.xitu.io/2018/6/10/163ea461ceb490a6?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" alt="1080P,420dpi的手机"></p>
<p>从上面的布局中可以看到，同样是1080P的手机，差异是比较明显的。在这种情况下，我们的UI可能需要做一些微调甚至单独适配。</p>
<p>第二个问题，这种方式无法快速高效的把设计师的设计稿实现到布局代码中，通过dp直接适配，我们只能让UI基本适配不同的手机,但是在设计图和UI代码之间的鸿沟，dp是无法解决的，因为dp不是真实像素。而且，设计稿的宽高往往和Android的手机真实宽高差别极大，以我们的设计稿为例，设计稿的宽高是375px<em>750px，而真实手机可能普遍是1080</em>1920,</p>
<p>那么在日常开发中我们是怎么跨过这个鸿沟的呢？基本都是通过百分比啊，或者通过估算，或者设定一个规范值等等。总之，当我们拿到设计稿的时候，设计稿的ImageView是128px<em>128px，当我们在编写layout文件的时候，却不能直接写成128dp</em>128dp。在把设计稿向UI代码转换的过程中，我们需要耗费相当的精力去转换尺寸，这会极大的降低我们的生产力，拉低开发效率。</p>
<h2 id="宽高限定符适配"><a href="#宽高限定符适配" class="headerlink" title="宽高限定符适配"></a>宽高限定符适配</h2><p>为了高效的实现UI开发，出现了新的适配方案，我把它称作<strong>宽高限定符适配</strong>。简单说，就是穷举市面上所有的Android手机的宽高像素值：</p>
<p><img src="http://user-gold-cdn.xitu.io/2018/6/12/163f4802fbef23d0?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" alt="img"></p>
<p>设定一个基准的分辨率，其他分辨率都根据这个基准分辨率来计算，在不同的尺寸文件夹内部，根据该尺寸编写对应的dimens文件。</p>
<p>比如以480x320为基准分辨率</p>
<ul>
<li>宽度为320，将任何分辨率的宽度整分为320份，取值为x1-x320</li>
<li>高度为480，将任何分辨率的高度整分为480份，取值为y1-y480</li>
</ul>
<p>那么对于800*480的分辨率的dimens文件来说，</p>
<p>x1=(480/320)*1=1.5px</p>
<p>x2=(480/320)*2=3px</p>
<p>…</p>
<p><img src="http://user-gold-cdn.xitu.io/2018/6/13/163f4f9e227a1bb4?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" alt="img"></p>
<p>这个时候，如果我们的UI设计界面使用的就是基准分辨率，那么我们就可以按照设计稿上的尺寸填写相对应的dimens引用了,而当APP运行在不同分辨率的手机中时，这些系统会根据这些dimens引用去该分辨率的文件夹下面寻找对应的值。这样基本解决了我们的适配问题，而且极大的提升了我们UI开发的效率，</p>
<p>但是这个方案有一个致命的缺陷，那就是需要精准命中才能适配，比如1920x1080的手机就一定要找到1920x1080的限定符，否则就只能用统一的默认的dimens文件了。而使用默认的尺寸的话，UI就很可能变形，简单说，就是容错机制很差。</p>
<p>不过这个方案有一些团队用过，我们可以认为它是一个比较成熟有效的方案了。</p>
<h2 id="UI适配框架（已经停止维护）"><a href="#UI适配框架（已经停止维护）" class="headerlink" title="UI适配框架（已经停止维护）"></a>UI适配框架（已经停止维护）</h2><p><a target="_blank" rel="noopener" href="https://github.com/hongyangAndroid/AndroidAutoLayout">鸿洋大佬的适配方案</a>的项目也来自于宽高限定符方案的启发。</p>
<p>使用方法也很简单：</p>
<p>第一步： 在你的项目的AndroidManifest中注明你的设计稿的尺寸。</p>
<pre><code>&lt;meta-data android:name=&quot;design_width&quot; android:value=&quot;768&quot;&gt;
&lt;/meta-data&gt;
&lt;meta-data android:name=&quot;design_height&quot; android:value=&quot;1280&quot;&gt;
&lt;/meta-data&gt;</code></pre>
<p>第二步： 让你的Activity继承自AutoLayoutActivity.</p>
<p>然后我们就可以直接在布局文件里面使用具体的像素值了，比如，设计稿上是96*96,那么我们可以直接写96px，APP运行时，框架会帮助我们根据不同手机的具体尺寸按比例伸缩。</p>
<p>这可以说是一个极好的方案，因为它在宽高限定符适配的基础上更进一步，并且解决了容错机制的问题，可以说完美的达成了开发高效和适配精准的两个要求。</p>
<p>但是我们能够想到，因为框架要在运行时会在onMeasure里面做变换，我们自定义的控件可能会被影响或限制，可能有些特定的控件，需要单独适配，这里面可能存在的暗坑是不可预见的，还有一个比较重要的问题，那就是整个适配工作是有框架完成的，而不是系统完成的，一旦使用这个框架，未来一旦遇到很难解决的问题，替换起来是非常麻烦的，而且项目一旦停止维护，后续的升级就只能靠你自己了，这种代价团队能否承受？当然，它已经停止维护了。</p>
<p>不过仅仅就技术方案而言，不可否认，这是一个很好的开源项目。</p>
<h2 id="小结"><a href="#小结" class="headerlink" title="小结"></a>小结</h2><p>讨论的上述几种适配方案都是可以实际用于开发中的比较成熟的方案，而且确实有很多开发者正在使用。不过由于他们各自都存在一些缺陷，所以我们使用了上述方案后还需要花费额外的精力着手解决这些可能存在的缺陷。</p>
<p>那么，是否存在一种相对比较完美，没有明显的缺陷的方案呢？</p>
<h2 id="smallestWidth适配"><a href="#smallestWidth适配" class="headerlink" title="smallestWidth适配"></a>smallestWidth适配</h2><p>smallestWidth适配，或者叫sw限定符适配。指的是Android会识别<strong>屏幕可用高度和宽度的最小尺寸</strong>的dp值（其实就是手机的宽度值），然后根据识别到的结果去资源文件中寻找对应限定符的文件夹下的资源文件。</p>
<p>这种机制和上文提到的宽高限定符适配原理上是一样的，都是系统通过特定的规则来选择对应的文件。</p>
<p>举个例子，小米5的dpi是480,横向像素是1080px，根据px=dp(dpi/160)，横向的dp值是1080/(480/160),也就是360dp,系统就会去寻找是否存在value-sw360dp的文件夹以及对应的资源文件。</p>
<p><img src="http://user-gold-cdn.xitu.io/2018/6/11/163ea6e3fcb3a835?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" alt="img"></p>
<p>smallestWidth限定符适配和宽高限定符适配最大的区别在于，前者有很好的容错机制，如果没有value-sw360dp文件夹，系统会向下寻找，比如离360dp最近的只有value-sw350dp，那么Android就会选择value-sw350dp文件夹下面的资源文件。这个特性就完美的解决了上文提到的宽高限定符的容错问题。</p>
<p>这套方案是上述几种方案中最接近完美的方案。 首先，<strong>从开发效率上，它不逊色于上述任意一种方案</strong>。根据固定的放缩比例，我们基本可以按照UI设计的尺寸不假思索的填写对应的dimens引用。 我们还有以375个像素宽度的设计稿为例，在values-sw360dp文件夹下的diemns文件应该怎么编写呢？这个文件夹下，意味着手机的最小宽度的dp值是360，我们把360dp等分成375等份，每一个设计稿中的像素，大概代表smallestWidth值为360dp的手机中的0.96dp，那么接下来的事情就很简单了，假如设计稿上出现了一个10px*10px的ImageView,那么，我们就可以不假思索的在layout文件中写下对应的尺寸。</p>
<p><img src="http://user-gold-cdn.xitu.io/2018/6/13/163f9dfd9ba47a62?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" alt="img"></p>
<p>而这种diemns引用，在不同的values-sw<N>dp文件夹下的数值是不同的，比如values-sw360dp和values-sw400dp,</p>
<p><img src="http://user-gold-cdn.xitu.io/2018/6/12/163f45e3e95e2650?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" alt="img"></p>
<p><img src="http://user-gold-cdn.xitu.io/2018/6/14/163f9e36163d741c?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" alt="img"></p>
<p>当系统识别到手机的smallestWidth值时，就会自动去寻找和目标数据最近的资源文件的尺寸。</p>
<p>其次，从稳定性上，它也优于上述方案。原生的dp适配可能会碰到Pixel 2这种有些特别的手机需要单独适配，但是在smallestWidth适配中，通过计算Pixel 2手机的的smallestWidth的值是411，我们只需要生成一个values-sw411dp(或者取整生成values-sw410dp也没问题)就能解决问题。</p>
<p>smallestWidth的适配机制由系统保证，我们只需要针对这套规则生成对应的资源文件即可，不会出现什么难以解决的问题，也根本不会影响我们的业务逻辑代码，而且只要我们生成的资源文件分布合理，，即使对应的smallestWidth值没有找到完全对应的资源文件，它也能向下兼容，寻找最接近的资源文件。</p>
<p>当然，smallestWidth适配方案有一个小问题，那就是它是在Android 3.2 以后引入的，Google的本意是用它来适配平板的布局文件（但是实际上显然用于diemns适配的效果更好），不过目前所有的项目应该最低支持版本应该都是4.0了（糗事百科这么老的项目最低都是4.0哦），所以，这问题其实也不重要了。</p>
<p>评论中还说到了一个缺陷我忘了提，那就是多个dimens文件可能导致apk变大，这是事实，根据生成的dimens文件的覆盖范围和尺寸范围，apk可能会增大300kb-800kb左右，目前糗百的dimens文件大小是406kb，我认为这是可以接受的。</p>
<h2 id="今日头条适配方案（更新）"><a href="#今日头条适配方案（更新）" class="headerlink" title="今日头条适配方案（更新）"></a>今日头条适配方案（更新）</h2><p><a target="_blank" rel="noopener" href="https://mp.weixin.qq.com/s/d9QCoBP6kV9VSWvVldVVwA">文章链接</a>，之前确实没有接触过，我简单看了一遍，可以说，这也是相对比较完美的方案，我先简单说一下这个方案的思路，它是通过修改density值，强行把所有不同尺寸分辨率的手机的宽度dp值改成一个统一的值，这样就解决了所有的适配问题。</p>
<p>比如，设计稿宽度是360px，那么开发这边就会把目标dp值设为360dp，在不同的设备中，动态修改density值，从而保证(手机像素宽度)px/density这个值始终是360dp,这样的话，就能保证UI在不同的设备上表现一致了。</p>
<p>这个方案侵入性很低，而且也没有涉及私有API，应该也是极不错的方案，我暂时也想不到强行修改density是否会有其他影响，既然有今日头条的大厂在用，稳定性应当是有保证的。</p>
<p>但是根据我的观察，这套方案<strong>对老项目是不太友好的</strong>，因为修改了系统的density值之后，整个布局的实际尺寸都会发生改变，如果想要在老项目文件中使用，恐怕整个布局文件中的尺寸都可能要重新按照设计稿修改一遍才行。因此，如果你是在维护或者改造老项目，使用这套方案就要三思了。</p>
<h2 id="福利赠送"><a href="#福利赠送" class="headerlink" title="福利赠送"></a>福利赠送</h2><p>生成diemns文件的过程以及数据计算方法上面已经讲清楚了，大家完全可以自己去生成这些文件，我在这里附赠生成values-sw的项目代码，大家直接拿去用，是Java工程。<a target="_blank" rel="noopener" href="https://github.com/ladingwu/dimens_sw">点击这里获取项目地址</a></p>
<h2 id="关于一些问题"><a href="#关于一些问题" class="headerlink" title="关于一些问题"></a>关于一些问题</h2><p>Q: 该适配方案怎么用？</p>
<p>A:点击进入上文的github项目，下载到本地，然后运行该Java工程，会在本地根目录下生成相应的文件，如果需要生成更多尺寸，在DimenTypes 文件中填写你需要的尺寸即可。</p>
<p>Q： 是否有推荐的尺寸？</p>
<p>A 300,320,360,390,411，450，这几个尺寸是比较必要的，然后在其中插入一些其他的尺寸即可，如果不放心，可以在300-450之间，以10为步长生成十几个文件就OK了。</p>
<p>Q:平板适配的问题？</p>
<p>A: 这个可以分成两个问题，第一，团队有没有专门针对平板设计UI?第二，才是如何对平板适配。如果团队内部没有针对平板设计UI,那么大家对于App在平板上运行的要求大抵也就是不要太难看即可。针对这种情况的适配方法是被动适配，即不要生成480以上的适配文件，这样在平板上，系统就会使用480这个尺寸的dimens文件，这样效果比主动适配更好；而如果团队主动设计了平板的UI，那么我们就需要主动生成平板的适配文件，大概在600-800之间，关键尺寸是640,768。然后按照UI设计的图来写即可。</p>
<p>Q：用了这套方案是否就不需要使用wrap_content等来布局了？</p>
<p>A:这是绝对错误的做法！如果UI设计上明显更适合使用wrap_content,match_parent,layout_weight等,我们就要毫不犹豫的使用，而且在高这个维度上，我们要依照情况设计为可滑动的方式，或者match_parent,尽量不要写死。总之，<strong>所有的适配方案都不是用来取代match_parent,wrap_content的，而是用来完善他们的</strong>。</p>

        </div>

    </div>

    

    

    

    

    

    
<nav class="article-nav">
  
    <a href="/2020/06/12/%E6%89%8B%E6%8A%8A%E6%89%8B%E6%95%99%E4%BD%A0%E5%86%99Socket%E9%95%BF%E8%BF%9E%E6%8E%A5/" id="article-nav-newer" class="article-nav-link-wrap">
      <div class="article-nav-caption">下一篇</div>
      <div class="article-nav-title">
        
          手把手教你写Socket长连接
        
      </div>
    </a>
  
  
    <a href="/2020/06/12/Java%E5%8F%8D%E5%B0%84%E7%9C%9F%E7%9A%84%E5%BE%88%E6%85%A2%E5%90%97/" id="article-nav-older" class="article-nav-link-wrap">
      <div class="article-nav-caption">上一篇</div>
      <div class="article-nav-title">Java反射真的很慢吗</div>
    </a>
  
</nav>


    <section class="share">
        <div class="share-title">分享</div>
        <a class="share-item" target="_blank"
            href="https://twitter.com/share?text=Android目前最稳定和高效的UI适配方案 - ApocalypseBlog&url=http://example.com/2020/06/12/Android%E7%9B%AE%E5%89%8D%E6%9C%80%E7%A8%B3%E5%AE%9A%E5%92%8C%E9%AB%98%E6%95%88%E7%9A%84UI%E9%80%82%E9%85%8D%E6%96%B9%E6%A1%88/">
            <box-icon type='logo' name='twitter'></box-icon>
        </a>
        <a class="share-item" target="_blank"
            href="https://www.facebook.com/sharer.php?title=Android目前最稳定和高效的UI适配方案 - ApocalypseBlog&u=http://example.com/2020/06/12/Android%E7%9B%AE%E5%89%8D%E6%9C%80%E7%A8%B3%E5%AE%9A%E5%92%8C%E9%AB%98%E6%95%88%E7%9A%84UI%E9%80%82%E9%85%8D%E6%96%B9%E6%A1%88/">
            <box-icon name='facebook-square' type='logo' ></box-icon>
        </a>
        <!-- <a class="share-item" target="_blank"
            href="https://service.weibo.com/share/share.php?title=Android目前最稳定和高效的UI适配方案 - ApocalypseBlog&url=http://example.com/2020/06/12/Android%E7%9B%AE%E5%89%8D%E6%9C%80%E7%A8%B3%E5%AE%9A%E5%92%8C%E9%AB%98%E6%95%88%E7%9A%84UI%E9%80%82%E9%85%8D%E6%96%B9%E6%A1%88/&pic=">
            <div class="n-icon n-icon-weibo"></div>
        </a> -->
    </section>

</article>









</div>
                </section>
            </section>

             
            <aside class="sidebar">
            
                
            </aside>
        </div>
    </div>

    <footer class="footer">
    <div class="footer-wave">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#3c4859" fill-opacity="1" d="M0,160L60,181.3C120,203,240,245,360,240C480,235,600,181,720,186.7C840,192,960,256,1080,261.3C1200,267,1320,213,1380,186.7L1440,160L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path></svg>
    </div>

    <div class="footer-wrap">
        <div class="footer-inner"> 
            ApocalypseBlog &copy; 2021<br>
            Powered By Hexo · Theme By <a href="https://github.com/lh1me/hexo-theme-aomori" target="_blank">Aomori</a>
        </div>
    </div>

</footer>




<script src="/dist/build.js?1.14.0.js"></script>


<script src="/dist/custom.js?1.14.0.js"></script>









</body>

</html>